<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-Y" :style="{ height: '94vh' }" @scrolltolower="scrolltolower">
			<view class="home-wapper">
				<!-- 轮播图 -->
				<swiper class="swiper" circular>
					<swiper-item v-for="item in indexInfo.lunboPics" :key="item.id">
						<view class="swiper-item">
							<img class="bn" :src="item.picPath" alt="" />
						</view>
					</swiper-item>
				</swiper>
				<!-- 分类 -->
				<view class="category">
					<div class="category-content-box">
						<view class="item" v-for="item in indexInfo.wishClasses.slice(0, 8)" :key="item.id">
							<img class="icon" :src="item.classIcon" alt="" />
							<view>{{ item.className }}</view>
						</view>
						<view class="item" v-if="indexInfo.wishClasses.length > 8">
							<view>查看更多</view>
						</view>
					</div>
				</view>
				<!-- 心愿池 -->
				<view class="card">
					<view class="card-header">心愿池</view>
					<view class="card-body">
						<!-- 心愿池top -->
						<swiper class="card-swiper-top card-round" circular autoplay vertical interval="2000">
							<swiper-item class="card-swiper-top-item" v-for="itemChild in indexInfo.completeWishes"
										 :key="itemChild.id">
								<text class="name title">{{ itemChild.createName }}</text>
								<text class="content">{{ itemChild.inputNameContent }}</text>
								<img src="@/assets/images/cheveron-right.png" alt="" />
							</swiper-item>
						</swiper>

						<!-- 心愿池bottom -->
						<view class="card-swiper">
							<swiper class="card-swiper" circular indicator-dots indicator-color="#ffdddc"
									indicator-active-color="#ffa9a7">
								<swiper-item class="card-swiper-item">
									<view class="l" v-for="itemChild in indexInfo.completeWishes.slice(0, 2)"
										  :key="itemChild.id">
										<img style="width: 130rpx; height: 130rpx" v-bind:src="itemChild.imgList.length > 0 ? itemChild.imgList[0].picPath : ''" alt="" />
										<view>
											<view class="status">
												<text style="font-size: 5px">
													{{
													itemChild.status == 0
													? '心愿无效(拒绝)'
													: itemChild.status == 1
													? '心愿审核中'
													: itemChild.status == 2
													? '心愿有效中'
													: itemChild.status == 3
													? '心愿己完成'
													: ''
													}}
												</text>

											</view>
											<view class="name">{{ itemChild.createName }}</view>
											<view class="tips">{{ itemChild.inputNameContent }}</view>
										</view>
									</view>
								</swiper-item>
								<swiper-item class="card-swiper-item" v-if="indexInfo.completeWishes.length>=3">
									<view class="l" v-for="itemChild in indexInfo.completeWishes.slice(2, 4)"
										  :key="itemChild.id">
										<img style="width: 130rpx; height: 130rpx" v-bind:src="itemChild.imgList.length > 0 ? itemChild.imgList[0].picPath : ''" alt="" />
										<view>
											<view class="status">
												{{
												itemChild.status == 0
												? '心愿无效(拒绝)'
												: itemChild.status == 1
												? '心愿审核中'
												: itemChild.status == 2
												? '心愿有效中'
												: itemChild.status == 3
												? '心愿己完成'
												: ''
												}}
											</view>
											<view class="name">{{ itemChild.inputNameContent }}</view>
											<view class="tips">{{ itemChild.inputTitleContent }}</view>
										</view>
									</view>
								</swiper-item>
								<swiper-item class="card-swiper-item" v-if="indexInfo.completeWishes.length>=5">
									<view class="l" v-for="itemChild in indexInfo.completeWishes.slice(4, 6)"
										  :key="itemChild.id">
										<img style="width: 130rpx; height: 130rpx" v-bind:src="itemChild.imgList.length > 0 ? itemChild.imgList[0].picPath : ''" alt="" />
										<view>
											<view class="status">
												{{
												itemChild.status == 0
												? '心愿无效(拒绝)'
												: itemChild.status == 1
												? '心愿审核中'
												: itemChild.status == 2
												? '心愿有效中'
												: itemChild.status == 3
												? '心愿己完成'
												: ''
												}}
											</view>
											<view class="name">{{ itemChild.inputNameContent }}</view>
											<view class="tips">{{ itemChild.inputTitleContent }}</view>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				<!-- 热门心愿 -->
				<view class="hot-card">
					<view class="card-title">
						<view class="l" style="font-size: 32rpx; color: #333333">
							<text class="" style="color: #ff544f"> 热门 </text>
							心愿
							<img src="@/assets/images/icon_remen.png" style="width: 40rpx; height: 40rpx; margin-left: 10rpx"
								 alt="" />
							<br>
							<!--<a >想要实现的心愿</a>-->
						</view>
						<view>
						</view>
					</view>
					<view class="card-body">
						<swiper class="card-swiper" circular indicator-dots indicator-color="#ffdddc"
								indicator-active-color="#ffa9a7">
							<swiper-item class="card-swiper-item">
								<view class="itemz" v-for="item in indexInfo.hotWishes.slice(0, 4)" :key="item.id">
									<view class="img-wrapper">
										<img style="width: 130rpx; height: 130rpx;border-radius: 60%" v-bind:src="item.imgList.length > 0 ? item.imgList[0].picPath : ''" alt="" />
									</view>
									<view class="name">{{ item.wishClassName }}</view>
									<view class="des">{{ item.inputNameContent }}</view>
								</view>
							</swiper-item>
							<swiper-item  class="card-swiper-item" v-if="indexInfo.hotWishes.length>=4">
								<view class="itemz" v-for="item in indexInfo.hotWishes.slice(4, 8)" :key="item.id">
									<view class="img-wrapper">
										<img style="width: 130rpx; height: 130rpx;border-radius: 60%" v-bind:src="item.imgList.length > 0 ? item.imgList[0].picPath : ''" alt="" />
									</view>
									<view class="name">{{ item.wishClassName }}</view>
									<view class="des">{{ item.inputNameContent }}</view>
								</view>
							</swiper-item>
							<swiper-item class="card-swiper-item" v-if="indexInfo.hotWishes.length>=8">
								<view class="itemz" v-for="item in indexInfo.hotWishes.slice(8, 12)" :key="item.id">
									<view class="img-wrapper">
										<img style="width: 130rpx; height: 130rpx;border-radius: 50%" v-bind:src="item.imgList.length > 0 ? item.imgList[0].picPath : ''" alt="" />
									</view>
									<view class="name">{{ item.wishClassName }}</view>
									<view class="des">{{ item.inputNameContent }}</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 热门推荐 -->
				<view class="hot-share"> 热门推荐 </view>
				<view class="wish-list">
					<ListContent :list="indexInfo.hotWishes" keyof="id">
						<template #default="{ item, index }">
							<HotInfoCard :data="item" :key="item.id" position="home">
							</HotInfoCard>
						</template>
					</ListContent>
				</view>
				<view class="index_push" @click="toPush">
					<img style="width: 150rpx;height: 150rpx;" src="@/assets/images/push-btn.png" alt="">
				</view>
			</view>
		</scroll-view>

	</view>

</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import ListContent from '@/components/ListContent/ListContent.vue'
import InfoCard from '@/components/InfoCard/InfoCard.vue'
import HotInfoCard from '@/components/InfoCard/HotInfoCard.vue'

import Api from '@/apis/api'

let indexInfo: any = reactive({
	completeWishes: [],
	hotWishes: [],
	lunboPics: [],
	wishClasses: []
})
const scrolltolower = (e: any) => { }

function toPush() {
	uni.reLaunch({
		url: '/pages/push/push'
	})
}

onMounted(() => {
	getIndexInfo()
})

function getIndexInfo() {
	return Api.indexInfo().then(({ data }: any) => {
		indexInfo.completeWishes = data.completeWishes
		indexInfo.hotWishes = data.hotWishes
		indexInfo.lunboPics = data.lunboPics
		indexInfo.wishClasses = data.wishClasses
	})
}

onPullDownRefresh(() => {
	getIndexInfo().finally(() => {
		uni.stopPullDownRefresh()
	})
})
</script>

<style lang="scss" scoped>
page {
	background: url('@/assets/images/home_bg.png') no-repeat #f8f8f8;
	background-size: cover;
}

.home-wapper {
	font-family: PingFang SC Bold;
	padding: 0 30rpx;
	padding-top: 28rpx;

	// padding-bottom: 80rpx;
	.scroll-Y {
		height: 100vh;
	}

	.swiper {
		height: 320rpx;

		.bn {
			width: 100%;
		}
	}

	.category {
		// display: flex;
		margin-top: 24rpx;
		// justify-content: space-between;
		text-align: center;
		width: 100%;
		overflow-y: hidden;
		overflow-x: scroll;
		height: 152rpx;

		.category-content-box {
			white-space: nowrap;
			width: auto;
			flex-direction: row;

			display: inline-block;
			zoom: 1;
			overflow-x: scroll;
			.item {
				font-size: 24rpx;
				color: #3d3d3d;
				width: 174rpx;
				display: inline-block;

				.icon {
					width: 110rpx;
					height: 110rpx;
				}
			}
		}

	}

	.card {
		background: #ffffff;
		border-radius: 20rpx;
		height: 412rpx;
		margin-top: 24rpx;

		.card-header {
			height: 76rpx;
			border-radius: 20rpx;

			line-height: 76rpx;
			padding-left: 32rpx;
			background: linear-gradient(180deg, #ffe5e5 0%, #ffffff 100%);
		}

		.card-body {
			padding: 0 30rpx;
		}


		.card-swiper-top {
			height: 88rpx;
		}

		.card-round {
			display: flex;
			margin-top: 8rpx;
			font-size: 24rpx;
			justify-content: space-between;
			border-radius: 20rpx;
			border: 2rpx solid #ffe3e3;
			height: 76rpx;
			align-items: center;
			padding: 0 26rpx;

			.card-swiper-top-item {
				height: 88rpx;
				line-height: 76rpx;

				img {
					float: right;
					margin-top: 22rpx;
					width: 29rpx;
					height: 28rpx;
				}

			}

			.name {
				font-size: 15px;
				width: 29rpx;
				height: 28rpx;
				color: #999999;
			}

			.content {
				color: #666666;
				margin-left: 28rpx;
			}
		}

		.card-swiper {
			margin-top: 22rpx;
			height: 220rpx;

			.card-swiper-item {
				display: flex;
				height: 158rpx;
				justify-content: space-between;

				.l {
					margin-left: 10px;
					width: 300rpx;
					height: 158rpx;
					background: #ffffff;
					box-shadow: 0px 0px 10.8rpx 0px #ffefef;
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.status {
						margin-left: 10px;

						width: 125rpx;
						border-radius: 8rpx;
						background: #fff1f1;
						color: #ff544f;
						font-size: 5rpx;
						text-align: center;
						padding: 4rpx 12rpx;
					}

					.name {
						margin-left: 10px;
						color: #333333;
						margin-top: 8rpx;
						font-size: 30rpx;
						width: 150rpx;
						height: 50rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;//显示的行数
					}

					.tips {
						width: 150rpx;
						margin-left: 10px;
						margin-top: 8rpx;
						color: #999999;
						font-size: 20rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2;//显示的行数
					}
				}
			}
		}
	}

	.hot-card {
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		height: 370rpx;
		padding: 0 32rpx;

		.card-swiper {
			height: 250rpx;
		}

		.card-title {
			display: flex;
			align-items: center;
			height: 94rpx;
			justify-content: space-between;

			.l {
				display: flex;
				align-items: center;
				position: relative;
				top: -14rpx;

				&::after {
					content: '';
					display: inline-block;
					color: #999;
					font-size: 22rpx;
					position: absolute;
					bottom: -36rpx;
					left: 0;
				}
			}
		}

		.card-body {
			// margin-top: 28rpx;

			.card-swiper-item {
				display: flex;
				justify-content: space-between;
			}

			.itemz {
				text-align: center;

				.img-wrapper {
					width: 120rpx;
					height: 120rpx;
					border: 8rpx solid #fff7f7;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.name {
					color: #333333;
					font-size: 28rpx;
					width: 150rpx;
					height: 50rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2;//显示的行数
				}

				.des {
					color: #999999;
					font-size: 22rpx;
					width: 150rpx;
					height: 50rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					-webkit-box-orient:vertical;
					-webkit-line-clamp:2
				}
			}
		}
	}

	.hot-share {
		color: #333333;
		font-size: 32rpx;
		margin-top: 32rpx;
		margin-bottom: 20rpx;
	}
	.index_push {
		position: fixed;
		right: 30rpx;
		top: 70%;
	}
}
</style>